<style lang="scss" scoped>
    @import '../../styles/common/loading.less';
    // @import '../../styles/common/common.scss';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }
  .button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

  }
  .col_a {
    margin-left: 2%;
  }
  .el-card {
    height: 200px;
  }

  .el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
  }
</style>
<template>
    <div>
        <div class="container">
            <div>
                <el-form ref="formInline" :model="formInline" class="select-submit-form">
                    <el-row type="flex">
                        <el-col :span="8">
                            <el-form-item label="业务单号" prop="businessNo">
                                <el-input v-model="formInline.businessNo" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" >
                            <el-form-item label="领款人姓名" prop="payeeName">
                                <el-input v-model="formInline.payeeName" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" >
                            <el-form-item label="证件号" prop="documentNo">
                                <el-input v-model="formInline.documentNo" ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex">
                        <el-col :span="8">
                            <el-form-item label="任务状态" prop="taskState">
                                <el-select v-model="formInline.taskState">
                                    <el-option label="请选择" value=""></el-option>
                                    <el-option label="待处理" value="01"></el-option>
                                    <el-option label="已处理" value="03"></el-option>
                                    <el-option label="已退回" value="04"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="select-btn-group">
                                <el-button type="primary" size="medium"  @click="handleSearch">查询</el-button>
                                <el-button type="primary" size="medium" @click="handleReset('formInline')">重置</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <!-- <template>
                <div>
                    <el-divider></el-divider>
                </div>
            </template> -->
            <!-- 列表 -->
            <el-table
                :data="tableData"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                style="margin: 30px 0;border: 1px solid #d6d9d8;"
                v-loading="loading"
                element-loading-text="Loading....."
            >
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="businessNo" label="业务单号" width="165" align="center">
                     <template  slot-scope="scope">
                        <!-- <a href="#" style="color: #ff8a00" >{{scope.row.businessNo}}</a> -->
                        <a href="#" style="color: #409EFF" @click="toTaskDetailPage(scope.row)">{{scope.row.businessNo}}</a>
                        <!-- <router-link 
                        :to="{
                            name: 'refundTicketAuditDetail', 
                            params: { 
                                taskId: scope.row.settleId,
                                taskState: scope.row.taskState
                            }
                        }">
                            <a href="#" style="color: #409EFF" >{{scope.row.businessNo}}</a>
                        </router-link> -->
                    </template>
                </el-table-column>
                <el-table-column prop="payeeName" label="领款人姓名" align="center"></el-table-column>
                <el-table-column prop="identifyNo" label="证件号" width="180" align="center"></el-table-column>
                <el-table-column prop="bankName" label="开户行" align="center"></el-table-column>
                <el-table-column prop="bankNo" label="银行账号" width="160" align="center"></el-table-column>
                <el-table-column prop="taskState" label="任务状态" align="center" :formatter="formatTaskState"></el-table-column>
                <el-table-column prop="paymentTypeName" label="赔付类型" align="center"></el-table-column>
                <el-table-column prop="payTime" label="退票时间" width="150" align="center"></el-table-column>
                <el-table-column prop="refundReason" label="退票原因" align="center"></el-table-column>
                <el-table-column prop="handleComrName" label="处理人机构" width="150" align="center"></el-table-column>
                <el-table-column prop="handlerName" label="处理人" align="center"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <div v-show="pagination.totalPage>0" class="index_page">
                    <el-pagination :current-page="pagination.currentPage" :page-size="pagination.rowsNumber"
                                    :page-sizes="[10, 25, 50, 100]"
                                    :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                                    @size-change="handleSizeChange" @current-change="queryFun">
                    </el-pagination>
                </div>
            </div>
        </div> 
    </div>
</template>

<script>
import{ queryProcessEngineList, taskCheck }from '@/api/baseDate';
import Cookies from 'js-cookie';
export default {
    name: 'refundTicketAudit',
    data() {
        return {
            loading: false,
            pagination: {
                currentPage: 1, // 当前页
                rowsNumber: 10, // 每页条数
                totalPage: 0 // 总条数
            },
            formInline: {},
            tableData:[],
        };
    },
    created() {
        this.queryRefundTicketAudit(1, 10);
    },
    methods: {
        handleSizeChange(pageSize){ // 改变当前页条数事件
            let pageIndex = this.pagination.currentPage;
            this.queryRefundTicketAudit(pageIndex,pageSize);
        },
        queryFun(pageNum){ // 改变当前页事件
            let rowsNumber = this.pagination.rowsNumber;
            this.queryRefundTicketAudit(pageNum,rowsNumber);
        },
        // 查询
        handleSearch() {
            let pageIndex = this.pagination.currentPage;
            let rowsNumber = this.pagination.rowsNumber;
            this.queryRefundTicketAudit(pageIndex, rowsNumber);
        },
        // 重置
        handleReset(formName){
            this.$refs[formName].resetFields();
        },
        queryRefundTicketAudit(pageNum,pageSize){
            let param = {
                ...this.formInline,
                pageNum: pageNum,
                pageSize: pageSize,
                taskType: 'refund_ticket_audit',
                comCode:Cookies.get("makeCom"),
                handleComrCode :Cookies.get("makeCom"),
                handleComrName : Cookies.get("cMakeCom"),
                handlerName : Cookies.get("userName"),
                handlerCode : Cookies.get("userCode"),
            }
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            queryProcessEngineList(param).then((res)=> this.handleTaskListResponse(res));
        },
        handleTaskListResponse(res){
            this.loading = false;
            if(res){
                if(res.data.resultCode){
                    if(res.data.resultCode != '0000'){ 
                        // 返回失败
                        this.$message.error(res.data.resultMsg);
                    }else{
                        // 返回成功
                        this.tableData = res.data.list;
                        this.pagination.totalPage = res.data.total;
                    }
                }
            }else{
                this.$message.error('系统异常'); 
            }
        },
        // 跳转至审核详情页面
        toTaskDetailPage(row){
            if(row.taskState === '01'){
                this.checkTask(row);
            }else{
                this.toDetailPage(row);
            }      
        },
        // 跳转详情
        toDetailPage(row){
            const datas = {
                taskId: row.settleId,
                taskState: row.taskState,
            };
            this.$router.push({
                name: 'refundTicketAuditDetail',
                params: datas,
            });
        },
        // 占位校验
        checkTask(row){
            let checkDatas = {
                processId: row.processId,
                handleComrCode: Cookies.get("makeCom"),
                handleComrName: Cookies.get("cMakeCom"),      
                handlerCode: Cookies.get("userCode"),
                handlerName: Cookies.get("userName"),
                reqFlag: "check"
            }
            taskCheck(checkDatas).then(res => {
                if(res){
                    if(res.data.resultCode != '0000'){
                        this.$alert(res.data.resultMsg,'提示', {
                            confirmButtonText: '确定'
                        });
                    }else{
                        this.toDetailPage(row);
                    }
                }else{
                    this.$message.error('系统异常');

                }
            })

        },
    },

}
</script>